<template>
	<div>
		<!--新增编辑按钮box-->
		<el-row :gutter="24">
			<el-col :span="18" style="margin-right: -5px;">
				<el-col :span="8" style="text-align: right;margin:10px 0 4px -15px;float: right;">
					<!--<el-button type="primary" size="small" v-on:click='carSeriesAdd' v-if="btnGroup.add">新增</el-button>
					<el-button type="primary" size="small" v-on:click='editCarSeries' v-if="btnGroup.edit">编辑</el-button>-->
					<el-button type="primary" size="small" v-on:click='carSeriesAdd'>新增</el-button>
					<el-button type="primary" size="small" v-on:click='editCarSeries'>编辑</el-button>
				</el-col>
			</el-col>
		</el-row>
		
		<!--tree And List Box-->
		<el-row :gutter="24">
			<!-- 参数树 -->
			<el-col :span="6" style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="paramTreeData" :filter-node-method="filterNode" :highlight-current=true :props="defaultProps" accordion @node-click="handleNodeClick" :auto-expand-parent=false ref="dictTree" node-key="id"></el-tree>
			</el-col>

			<el-col :span="18">
				<el-table :data="carSeries.dataList" v-if="carType" stripe border height="460" @row-click='carSeriesRowClick' highlight-current-row @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60" fixed>
					</el-table-column>
				</el-table-column>
					<el-table-column prop="warningType" label="预警类型" width="400" :formatter="warningTypeCov"></el-table-column>
					<el-table-column prop="warningNum" label="预警数" width="400"></el-table-column>
				</el-table>
				<el-pagination small v-if="carType" @size-change="handleGroupSizeChange" @current-change="handleGroupCurrentChange" :current-page="groupCurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="carSeries.total">
				</el-pagination>
			</el-col>
		</el-row>
		<!--</el-row>-->

		<!--弹框 预警设置-->
		<el-dialog title="预警设置" v-model="carSeriesShow" >
			<el-form :model="carSeriesFormData" ref="carSeriesForm" :rules="dictRule" label-width="150px">
				<el-col :span="12">
					<el-form-item label="预警类型" prop="warningType" required>
						<el-select size="small" v-model="carSeriesFormData.warningType" placeholder="请选择品牌">
							<el-option v-for="item in brandComboData" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				
				<el-col :span="12">
					<el-form-item label="日期类型" prop="startDateKey" required>
						<el-select size="small" v-model="carSeriesFormData.startDateKey" placeholder="请选择日期类型">
							<el-option v-for="item in startTimeOption" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="预警数" prop="warningNum" required>
						<el-input size="small" v-model="carSeriesFormData.warningNum"></el-input>
					</el-form-item>
				</el-col>
				
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="carSeriesShow = false">取 消</el-button>
				<el-button type="primary" @click="saveCarSeries">提交</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>
<script>
	import moment from 'moment'
	export default {
		data: function() {
			return {
				//是否显示全部车系
				allSeries: '1',

				//左侧数数据
				paramTreeData: [], // #tree数据
				//树型数据配置
				defaultProps: { // # tree 树形配置
					children: 'child',
					label: 'label'
				},
				//字典树的过滤条件
				//dictTreeSearchValue: '',

				//选中的节点的lable
				datalabel: '',
				//选中的节点的id
				dataValue: "",
				//品牌还是车型
				carType: '1',

				btnGroup: {},
				//分页设置
				page: this.page,
				//车系数据
				carSeries: {
					total: 0,
					dataList: []
				},
				//品牌编码
				brandCode: '',
				//车系查询条件
				groupValue: '',
				//车辆型号查询条件
				carModuleData: '',
				//车辆型号查询条件
				carModuleNoData: '',
				//车型数据
				carModel: {
					total: 0,
					dataList: []
				},
				//车辆配置
				carConfigure: {
					total: 0,
					dataList: []
				},
				//字典转换值
				brandConvertData: {},
				//等级转换
				levelConvertData: {},
				//类型
				type: '',
				
				//当前车系页
				groupCurentPage: 1,
				//当前字典页
				dictCurentPage: 1,
				//品牌下拉
				brandComboData: [],
				//车辆等级下拉
				levelComboData: [],
				//是否在销的下拉
				isSaleCombo: [{
					label: "是",
					value: "1"
				}, {
					label: "否",
					value: "0"
				}],
				//选中的车系编号
				carSeriesCode: '',
				//选中的车系名称
				carSeriesName: '',
				// 字典车系表单
				carSeriesShow: false,
/*********************************************************************/
				//仓库类型转换
				warehouseConvertData: {},
				
				//节点ID
				nodeId:'',
				
				//还原数据集合
				reCarSeriesFormData: {
					
					id: '',
					brand: '',
					carSeries: '',
					carModel: '',
					warningType: '',
					warningNum: '',
					showLevel: '',
					startDateKey:'',
					
				},
				//数据集合
				carSeriesFormData: {
					
					levelId:'',
					levelType:'1',
					id: '',
					brand: '',
					carSeries: '',
					carModel: '',
					warningType: '',
					warningNum: '',
					showLevel: '',
					startDateKey:'',
				},
				startTimeOption:[
				{
					label:"入库日期",
					value:"1",
				},
				{
					label:"配货日期",
					value:"2",
				},
				{
					label:"发货日期",
					value:"3",
				},
				{
					label:"采购申请日期",
					value:"4",
				},
				],
				//车型表单
				carModelFormShow: false,

				carConfigureRule: {
				},
				warningConvertData:{},

				//校验规则
				dictRule: {
					brandCode: [{
						required: true,
						message: '请选择预警类型',
						trigger: 'change'
					}],
					carSeriesCode: [{
						required: true,
						message: '请输入预警数',
						trigger: 'blur'
					}],
					carSeriesName: [{
						required: true,
						message: '请输入车系名称',
						trigger: 'blur'
					}],
					
					multipleSelection: [],
					multipleSelection2: [],

				}
			}
		},
		computed: {

		},
		methods: {
			//点击资源树节点
			handleNodeClick(data) { // # 点击资源树
				//debugger;
				//this.$data.carType = data.type;	// 级别
				this.$data.carSeriesFormData.levelType = data.type;
				this.$data.carSeriesFormData.levelId = data.value;// 节点
				this.$data.dataValue = data.label;
				this.Query();
			},

			//是否在售状态转换
			saleStatusCov: function(row, column) {
				return row.saleStatus == "1" ? '在售' : '已停售';
			},

			//资源过滤
			filterNode: function(value, data, node) { // # tree 资源过滤
				if(!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			
			//查询参数树
			queryParamTree: function() {
				//获取资源树
				debugger;
				this.$http.get(this.API_ROOT + '/base/car/tree', {

					params: {
						showLevel: this.$data.carSeriesFormData.showLevel,
						allSeries: this.$data.allSeries,
					}
				}).then((response) => {
					this.$data.paramTreeData = response.data; //# 查询tree数据
					//this.Query();
				}, (response) => {});
			},

			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
				if(this.$data.multipleSelection.length > 1)
					this.$message.error("请选择一条数据！");
			},
			//选择框
			handleSelectionChange2: function(val) {
				debugger;
				this.$data.multipleSelection2 = val;
				if(this.$data.multipleSelection2.length > 1)
					this.$message.error("请选择一条数据！");
			},
			//车系行被点击
			carSeriesRowClick: function(row) {
				this.$data.carSeriesCode = row.carSeriesCode;
				this.$data.carSeriesName = row.carSeriesName;
				this.carModelQuery();
			},
			//车系查询
			Query: function() {
				
				this.$http({
					method: 'GET', // post
					//url: this.API_ROOT + '/base/car/page', //修改地址001
					url: this.API_ROOT + '/scm/warningSetUp/page',
					
					params: {
						
						type:this.$data.carSeriesFormData.levelType, // 节点层次（0.1.2）
						levelId:this.$data.carSeriesFormData.levelId, // 节点ID
						
						start: this.$data.groupCurentPage, //页码
						limit: this.$data.page.pageSize, //每页的数量
					}
				}).then(function(resp) {
					resp.data.total = parseInt(resp.data.total);
					// es5写法
					this.$data.carSeries = resp.data;
				}, function(error) {
					// error
				})
			},
			//debugger;
			//添加预警规则
			carSeriesAdd: function() {
				//重新清空数据
				debugger;
				this.$data.carSeriesFormData = Object.assign(this.$data.carSeriesFormData, this.$data.reCarSeriesFormData); // 替换数据
				this.$data.carSeriesFormData.brandCode = this.$data.datalabel;///  id ，，
				//this.$data.carSeriesFormData.levelType = this.$data.datalabel;
				this.$data.carSeriesShow = true;//修改显示  。树形
			},
			//字典车系，分页大小切换
			handleGroupSizeChange: function() {

			},
			//字典车系,当前页切换
			handleGroupCurrentChange: function(currentPage) {
				this.$data.groupCurentPage = currentPage;
				this.$data.carSeriesCode = '';
				this.Query();
			},
			//启用车系
			startCarSeries: function() {
				if(this.$data.multipleSelection.length == 1) {
					var resRoleData = this.$data.multipleSelection[0];
					//this.$data.carSeriesCode = data.gCode;
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/base/car/start',
						params: {
							id: resRoleData.id,
						}
					}).then(function(resp) {
						this.Query();
					}, function(error) {
						// error
					})
				} else {
					this.$message.error("请选择一条数据");
				}
			},
			//编辑预警规则
			editCarSeries: function() {
				if(this.$data.multipleSelection.length == 1) {

					var resRoleData = this.$data.multipleSelection[0];
				
					this.$http.get(this.API_ROOT + '/scm/warningSetUp/info', {
						params: {
							id: resRoleData.id
						}
					}).then((response) => { // response 返回结果
						// success callback
						this.$data.carSeriesFormData = Object.assign(this.$data.carSeriesFormData, response.data.data);
					}, (response) => {
						// error callback
					});
					this.$data.carSeriesShow = true;
				} else {
					this.$message.error("请选择一条数据");
				}
			},
			
			//添加预警规则
			saveCarSeries: function() {
				this.$refs.carSeriesForm.validate(function(valid, $event) {
					this.$data.carSeriesFormData.type = 0;

					// 验证通过
					if(valid) {
						debugger; //     /scm/warningSetUp/save
						this.$http.post(this.API_ROOT + '/scm/warningSetUp/save', this.$data.carSeriesFormData)
							.then(resp => {
								debugger;
								if(resp.data.success) {
									debugger;
									//this.$message(resp.data.msg);
									this.Query();
									this.$data.carSeriesShow = false;
									this.queryParamTree();

								} else {
									this.$message.error(resp.data.msg);
								}
							}, resp => {

							});
					} else {
						return false
					}
				}.bind(this))
			},
			//车型查询
			carModelQuery: function() {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/carModel/page',
					params: {
						seriesId: this.$data.datalabel,
						start: this.$data.dictCurentPage,
						limit: this.$data.page.pageSize,
						modelCode: this.$data.carModuleNoData,
					}
				}).then(function(resp) {
					resp.data.total = parseInt(resp.data.total);
					debugger;
					this.$data.carModel = resp.data;
				}, function(error) {
					// error
				})

			},
	
			//字典，分页大小切换
			handleDictSizeChange: function() {

			},
			//字典,当前页切换
			handleDictCurrentChange: function(currentPage) {
				this.$data.dictCurentPage = currentPage;
				this.carModelQuery();
			},
			
		
			
			//品牌转换
			queryDeptCovert: function() {
				this.$http.get(this.API_ROOT + '/base/brand/convert', {
					params: {}
				}).then((response) => {
					this.$data.brandConvertData = response.data;
				}, (response) => {});
			},
			//等级转换
			levelCovert: function() {
				this.$http.get(this.API_ROOT + '/base/dict/convert', {
					params: {
						group: "0501"
					}
				}).then((response) => {
					this.$data.levelConvertData = response.data;
				}, (response) => {});
			},
			
			//仓库类型解析
			warningTypeCov: function(row, column) {
				return this.$data.warningConvertData[row.warningType];
			},
			warningTypeCovert: function() {
				debugger;
				this.$http.get(this.API_ROOT + '/base/dict/convert', {
					params: {
						group: "warningType"
					}
				}).then((response) => {
					this.$data.warningConvertData = response.data;
				}, (response) => {});
			},
		
		},
		
		
		/**********************************methods 结束**************************************/

		/**********************************类型解析**************************************/
		
		
		//表单创建时执行
		created: function() {
			//debugger;
			this.$data.carSeriesCode = '';
			//品牌转换
			this.queryDeptCovert();
			this.levelCovert();
			this.warningTypeCovert();
			//查询参数树
			this.queryParamTree();

			this.$http.get(this.API_ROOT + '/base/dict/combo', {

				params: {
					//group: "0501"
					group: "warningType"
				}
			}).then((response) => {
				//this.$data.levelComboData = response.data;
				this.$data.brandComboData = response.data;
			}, (response) => {});
			//debugger;
		
			//按钮权限
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/rbac/login/btn', //url 输出 按照车牌号的 车牌号
				params: { //发送的参数
					resPath: "base/CarSeries", ////查询条件 按照输入的车牌号
				}
			}).then(function(resp) {
				debugger;
				var btnData = resp.data.dataList;
				var temp = {};
				for(var i = 0; i < btnData.length; i++) {
					var btnName = btnData[i].btnName;
					temp[btnName] = btnName;
				}
				Object.assign(this.$data.btnGroup, temp);
			}, function(error) {
				// error
			})
		}
	}
</script>
<style>
	.el-table .info-row {
		height: 15px !important;
	}
	
	.item {
		width: 30px;
	}
	
	.el-dropdown .el-button-group,
	.el-table .el-tooltip,
	.el-table .el-tooltip__rel {
		display: inline;
	}
</style>